<template>
  <div>
    <el-cascader :props="regionProps" :show-all-levels="showalllevels" v-model="op" :size="size" @change="handleItemChange" :options="regionList"
        style="width:100%" :placeholder="placeholder" clearable></el-cascader>
  </div>
</template>

<script>
import add from "@/assets/js/address3";

export default {
  name: "cityCascader",
  props: {
    is_id: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "请选择地区"
    },
    level: {
      type: Number,
      default: 3
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    showalllevels: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: "small"
    },
    selected: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    const that = this;
    return {
      // op: this.opCheck,
      op: this.selected,
      regionProps: {
        checkStrictly: that.checkStrictly,
        value: that.is_id == true ? "id" : "title",
        label: "title",
        children: "z",
        lazy: true,
        lazyLoad (node, resolve) {
          const { level, root, data, value } = node;
          let params = {};
          if (root) {
            params = {
              pid: "0"
            };
          } else {
            params = {
              pid: data.id
            };
          }
          if (root) {
            that.$api.getCity.getPro(params).then(res => {
              if (res.data.code == 200) {
                var result = res.data.result.map(item => {
                  item.z = [];
                  return Object.assign(item, {
                    leaf: level >= that.level
                  });
                });
                resolve(result);
              }
            });
          } else {
            that.$api.getCity.getPro(params).then(res => {
              if (res.data.code == 200) {
                var result = res.data.result.map(item => {
                  item.z = [];
                  return Object.assign(item, {
                    leaf: level >= that.level
                  });
                });
                resolve(result);
              }
            });
          }
        }
      },
      regionList: []
    };
  },
  created () {
    this.getPosition();
  },
  methods: {
    handleItemChange (val) {
      // let vm = this;
      //  if (val.length === 2){
      console.log(val);
      this.$emit("change", val);
      //  }
    },
    getPosition () {
      // console.log(add)
    }
  },
  watch:{
    selected(val){
      this.op = val;
    }
  }
};
</script>
